<template>
	<div class="chat-container">
		<!--<li v-for="(item) in msgData" >-->
			<dl class="chat-item" :class="[msgDataItem.is_mag == 22 ? 'send-me' : '']" >
				<dt class="member-avatar">
					<img :src="[msgDataItem.is_mag == 22 ? msgDataItem.member_avatar : msgDataItem.service_img]" />
				</dt>
				<!--	纯文字	-->
				<dd class="item-content">
					<div class="send-time">
						<span class="time">{{msgDataItem.add_time | fromDate }}</span>						
						<slot name='close'></slot>
					</div>
					<div class="chat-content"  v-if="msgDataItem.s_type == 'text' ">
						<p class="chat-text">{{msgDataItem.text}}</p>
					</div>
				<!-- 地址+文字-->
					<div  v-else-if="msgDataItem.s_type == 'text_area' ">
						<div class="chat-content">
							<p class="chat-text">{{msgDataItem.text}}</p>
						</div>
						<div class="chat-btn">
							查看地址
						</div>
					</div>
					
					<!--文字+图片-->
					<div  v-else-if="msgDataItem.s_type == 'text_img' ">
						
						<div class="chat-content">
							<p class="chat-text">{{msgDataItem.text}}</p>
						</div>
						<div class='goods-thumb'>
							<img :src="msgDataItem.ser_img"  />
						</div>
					</div>
					
					<!--文字+视频-->
					<div v-else-if="msgDataItem.s_type == 'text_img_video'">
						<div class="chat-content">
							<p class="chat-text">{{msgDataItem.text}}</p>
						</div>
						<div class='goods-thumb'>
							<div class="play-btn"></div>
							<img :src="msgDataItem.ser_img"  />
						</div>						
					</div>
					
					<!--文字+物流-->
					<div  v-else-if="msgDataItem.s_type == 'text_logistics'">
						<div class="chat-content">
							<p class="chat-text">{{msgDataItem.text}}</p>
						</div>
						<div class="chat-btn">
							查看物流
						</div>
					</div>
					
					<!--邀请-->
					<div  v-else-if="msgDataItem.s_type == 'text_img_button'">
						<div class="chat-content">
							<p class="chat-text">{{msgDataItem.text}}</p>
						</div>
						<div class='goods-thumb'>
							<img :src="msgDataItem.ser_img"  />
						</div>
						<div class="share-btn">
							<span>立即邀请</span>
						</div>
					</div>
					
					<!-- 纯图片 -->
					<div class='goods-thumb'  v-else-if="msgDataItem.s_type == 'img'">
						<img :src="msgDataItem.ser_img" />
					</div>
				</dd>
				<!-- 地址+文字-->
				<!--<dd class="item-content">
					<div class="send-time">
						<span class="time">{{msgDataItem.add_time | fromDate }}</span>						
						<slot name='close'></slot>
					</div>
				</dd>-->
				<!--文字+图片-->
				<!--<dd class='item-content' v-else-if="msgDataItem.s_type == 'text_img' ">
					<div class="send-time">
						<span class="time">{{msgDataItem.add_time | fromDate }}</span>							
						<slot name='close'></slot>
					</div>
				</dd>-->
				<!--文字+视频-->
				<!--<dd class='item-content'  v-else-if="msgDataItem.s_type == 'text_img_video'">
					<div class="send-time">
						<span class="time">{{msgDataItem.add_time | fromDate }}</span>							
						<slot name='close'></slot>
					</div>
				</dd>-->
				<!--文字+物流-->
				<!--<dd class='item-content'  v-else-if="msgDataItem.s_type == 'text_logistics'">
					<div class="send-time">
						<span class="time">{{msgDataItem.add_time | fromDate }}</span>							
						<slot name='close'></slot>
					</div>
				</dd>-->
				<!--邀请-->
				<!--<dd class='item-content'  v-else-if="msgDataItem.s_type == 'text_img_button'">
					<div class="send-time">
						<span class="time">{{msgDataItem.add_time | fromDate }}</span>							
						<slot name='close'></slot>
					</div>
				</dd>-->
				
				<!-- 纯图片 -->
				<!--<dd class='item-content'  v-else-if="msgDataItem.s_type == 'img'">
					<div class="send-time">
						<span class="time">{{msgDataItem.add_time | fromDate }}</span>							
						<slot name='close'></slot>
					</div>
				</dd>-->
			</dl>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions } from 'vuex';
	var vm;
	export default {
		name: 'MsgType',
		props: {
			msgDataItem: {
				type: Object,
			}
		},
		computed:{
			...mapGetters(['formatDate'])
		},
		data() {
			vm = this;
			return {
				
			}
		},
		filters: {
			fromDate: function(timeString) {
				return vm.formatDate(new Date(timeString * 1000), "mm-dd hh:ii:ss")
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.chat-container {
		.chat-item {
			&.send-me {
				flex-direction: row-reverse;
				.member-avatar {
					margin-right: 0;
					margin-left: 12px;
				}
			}
			display: flex;
			padding-top: 10px;
			margin-bottom: 60px;
			.member-avatar {
				overflow: hidden;
				flex-shrink: 0;
				width: 90px;
				height: 90px;
				margin-right: 12px;
				border-radius: 50%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.item-content {
				position: relative;
				width: 470px;
				padding: 30px;
				background-color: rgba(255, 255, 255, 0.95);
				box-shadow: 0 10px 110px 0 rgba(0, 0, 0, 0.10), 0 0 10px 0 rgba(255, 255, 255, 0.05) inset;
				border-radius: 10px;
				.send-time {
					display: flex;
					justify-content: space-between;
					
					.time {
						color: #9b9b9b;
						font-size: 18px;
						line-height: 30px;
					}
				}
				.chat-content {
					.chat-text {
						color: #4a4a4a;
						font-size: 28px;
						line-height: 40px;
					}
				}
				.chat-btn {
					width: 160px;
					height: 48px;
					margin-top: 20px;
					background-color: #4a4a4a;
					box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.08);
					font-size: 20px;
					text-align: center;
					line-height: 48px;
					color: #fff;
				}
				.goods-thumb {
					position: relative;
					margin: 20px -30px -30px;
					height: 310px;
					&::after {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						height: 206px;
						background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0, 0, 0, 0.55) 100%);
						content: "";
						z-index: 30;
					}
					img {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10px;
					}
					.play-btn {
						position: absolute;
						top: 40px;
						left: 40px;
						width: 55px;
						height: 55px;
						background: rgba(255,255,255,0.95);
						box-shadow: 0 44px 44px 0 rgba(0,0,0,0.10), inset 0 0 60px 0 rgba(255,255,255,0.40);
						border-radius: 50%;
						z-index: 90;
						&::after {
							position: absolute;
							top: 50%;
							left: 50%;
							width: 0;
							height: 0;
							margin-left: -6px;
							margin-top: -10px;
							border-left: 16px solid #565656;
							border-top: 10px solid transparent;
							border-bottom: 10px solid transparent;
							content: "";
							z-index: 90
						}
					}
				}
				.share-btn {
					height: 75px;
					margin-top: 60px;
					background: linear-gradient(-180deg, #f64565 0%, #ef364e 100%);
					box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
					text-align: center;
					line-height: 76px;
					color: #fff;
					font-size: 28px;
					border-radius: 8px; 					
				}
			}
		}
	}
</style>